<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11.props的特点</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react-dom核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px dashed #ccc;
        }
    </style>
</head>

<body>
    <!--4、创建容器-->
    <div id="root"></div>
    <!--5、设置脚本类型,相当于里面所有代码都默认处在严格模式下，而严格模式下的函数的this为undefined-->
    <script type="text/babel">
        //什么时候使用ref，什么时候使用e.target
        //当发生事件的时候所在的DOM元素是程序所需要则可以使用e.target，反之只能采用ref
        //官方也明确不要滥用ref，容易造成性能的问题
        //虽然第一种写法较交单，但是官方不推荐

        //ref是虚拟DOM元素对象身上的一个属性，目的/作用是为了获取真实DOM
        //获取的时候有三种写法：
        //1）字符串写法  <标签 ref="名称"></标签>
        //2) 回调函数写法 <标签 ref={el=>this.名称 = el}></标签>
        //3) createRef写法 这个方法是在React对象中   
        //   容器名称 = createRef() 返回值是一个对象 {current:null} 
        //如果想要在这个容器对象中添加真实DOM，需要获取谁就在谁的身上添加ref属性，进行调用 
        //<标签 ref={this.容器名称}></标签>
        //6、创建容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //7、创建类组件
        let { Component, createRef } = React;
        // console.dir(React)
        //以登录界面为例
        class App extends Component {
            //创建容器对象(目的是为了获取真实DOM)
            //在App的组件实例化对象身上添加一些属性
            username = createRef(); //{current: null}
            userpass = createRef();  //{current: null}
            box = createRef();   //{current: null}
            constructor() {
                super();
                this.show = this.show.bind(this);
            }
            render() {
                return <div>
                    <p>用户名：<input type="text" ref={this.username} /></p>
                    <p>密码：<input type="password" ref={this.userpass} /></p>
                    <p><button onClick={this.show}>登录</button></p>
                    <hr />
                    <div className="box" ref={this.box}></div>
                </div>
            }
            show = function () {
                console.log(this);
                //获取用户名文本框的值
                let uname = this.username.current.value;
                //获取密码文本框的值
                let upass = this.userpass.current.value;
                //定义字符串
                let str = `用户名:${uname};密码:${upass}<br/>`;
                //赋值
                this.box.current.innerHTML += str;
                //清空
                this.username.current.value = ''
                this.userpass.current.value = ''
            }
        }
        //8、渲染
        root.render(<App />); 
    </script>
</body>

</html>